<!--
Fontmin Main
===

Examples:

    <fm-main></fm-main>

-->

<link rel="import" href="../dep/polymer/polymer.html">
<link rel="import" href="../dep/layout/layout.html">

<link rel="import" href="fm-file-drop.html">
<link rel="import" href="fm-glyphs-input.html">
<link rel="import" href="fm-preview.html">

<dom-module id="fm-main">
    <style>
        #panelInput {
            background: #eee;
        }
        #panelPreview {
            background: #fff;
        }
        #panelAction {
            height: 70px;
            padding: 10px;
            box-sizing: border-box;
        }
        #glyphsInput {
            border-bottom: 1px solid rgba(0, 0, 0, .12);
        }
        #fileDrop {
            color: #999;
            text-align: center;
            border: 1px dashed #ccc;
            box-sizing: border-box;
            line-height: 50px;
        }
        #fileDrop.over {
            color: #666;
            background: #ddd;
            border: 1px solid #999;
            box-shadow: inset 1px 1px 5px rgba(0,0,0,.3);
        }
        #selectedFont {
            border: 1px solid #ccc;
            box-sizing: border-box;
            position: relative;
        }
        #selectedFont h4 {
            font-weight: 400;
            line-height: 50px;
            height: 50px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin: 0 50px 0 20px;
        }
        #resetFont {
            position: absolute;
            right: 10px;
            top: 10px;
            line-height: 30px;
            color: #009688;
            cursor: pointer;
        }
        #resetFont:hover {
            color: #2fa79c;
        }
        #generateAction {
            position: relative;
            width: 50px;
            line-height: 50px;
            margin-left: 10px;
            text-align: center;
            background: #009688;
            color: #fff;
            cursor: pointer;
            font-size: 14px;
        }
        #generateAction:hover {
            background: #2fa79c;
        }
        #generateAction[disabled] {
            cursor: default;
            background: #ccc;
        }

        #loadingWrapper {
            color: #fff;
            background: rgba(0, 0, 0, .85);
            -webkit-user-select: none;
        }
        #loading {
            text-align: center;
            position: relative;
        }
        #loading strong {
            display: block;
            line-height: 30px;
            font-size: 12px;
            font-weight: 400;
            color: #666;
        }
        #loading span {
            -webkit-animation: loading 1s infinite;
            -webkit-animation-delay: .2s;
            -webkit-transform: scale(0.8);
            content: '';
            display: inline-block;
            height: 12px;
            width: 12px;
            border: 3px solid #fff;
            border-radius: 50%;
        }
        #loading span:first-child {
            -webkit-animation-delay: 0;
        }
        #loading span:last-child {
            -webkit-animation-delay: .4s;
        }
        @-webkit-keyframes loading {
            0% { -webkit-transform: scale(0.6); opacity: .6; }
            50%	{ -webkit-transform: scale(0.8); opacity: 1; }
            100% { -webkit-transform: scale(0.6); opacity: .6; }
        }
    </style>

    <template>

        <div id="panelInput" class="flex one vertical layout">

            <fm-glyphs-input
                id="glyphsInput"
                on-value-changed="onInputValueChanged"
                label="文本片段"
                placeholder="输入文本进行字体子集化，输出字体只包含所选字型">
            </fm-glyphs-input>

            <div id="panelAction" class="horizontal layout">
                <fm-file-drop
                    id="fileDrop"
                    class="flex"
                    hidden$="[[selected]]"
                    desc="将所需字体拖至此处 (*.ttf)"
                    accept-suffixes='[".ttf"]'
                    on-file-dropped="onFileDropped"
                    on-error="onFileError">
                </fm-file-drop>

                <div id="selectedFont" hidden$="[[!selected]]" class="flex">
                    <h4>{{family}}</h4>
                    <span id="resetFont" on-click="resetFont">取消</span>
                </div>

                <div id="generateAction"
                    disabled$="[[_isGenerateDisabled(content,selected)]]"
                    on-click="generate">生成</div>
            </div>
        </div>

        <div id="panelPreview" class="flex one vertical layout">
            <fm-preview id="preview" class="flex"></fm-preview>
        </div>

        <div id="loadingWrapper" hidden$="[[!loading]]" class="fit horizontal layout">
            <span id="loading" class="flex self-center">
                <span></span>
                <span></span>
                <span></span>
                <strong>字体生成中，请稍后</strong>
            </span>
        </div>

    </template>
</dom-module>

<script>
    Polymer({
        is: 'fm-main',

        hostAttributes: {
            class: 'fit horizontal layout'
        },

        properties: {
            content: {
                type: String
            },
            family: {
                type: String
            },
            src: {
                type: String
            },
            selected: {
                type: Boolean,
                value: false
            },
            loading: {
                type: Boolean,
                value: false
            }
        },

        _isGenerateDisabled: function (content, selected) {
            return !this.selected || !this.content;
        },

        onFileDropped: function (evt) {
            var file = evt.detail.file;

            this.family = file.name.replace(/\.ttf$/i, '');
            this.src = file.path;
            this.selected = !this.selected;

            this.$.preview.setFont(this.family, this.src);
        },

        onFileError: function (evt) {
            if (evt.detail.type === 'suffix') {
                alert('只支持 *.ttf 格式哦！');
            }
        },

        onInputValueChanged: function (evt) {
            this.content = evt.detail.newValue;
            this.$.preview.setContent(this.content);
        },

        resetFont: function () {
            this.$.preview.resetFont();
            this.selected = !this.selected;
        },

        generate: function () {
            if (this.$.generateAction.getAttribute('disabled') !== null) {
                return;
            }

            var self = this;

            this.loading = true;

            var Fontmin = require('fontmin');
            var rename = require('gulp-rename');

            var dirName = this.family + '_' + (new Date()).getTime();
            var distPath = require('path').join(process.cwd(), 'dist', dirName);

            var fontmin = new Fontmin()
                .src(this.src)
                .use(Fontmin.glyph({
                    text: this.content
                }))
                .use(Fontmin.ttf2eot({
                    clone: true
                }))
                .use(Fontmin.ttf2woff({
                    clone: true
                }))
                .use(Fontmin.ttf2svg({
                    clone: true
                }))
                .use(Fontmin.css({
                    base64: true
                }))
                .use(rename(
                    function (path) {
                        if (path.extname === '.css') {
                            path.basename += '-embed';
                        }
                    }
                ))
                .use(Fontmin.css())
                .dest(distPath);

            fontmin.run(
                function (err, files) {
                    self.loading = false;

                    if (err) {
                        alert(err);
                    }

                    require('nw.gui').Shell.showItemInFolder(distPath);
                }
            );
        }
    });
</script>
